<template>
	<view class="tradingDayStatement">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="title-wrapper">
				<!-- <view class="title" @click="selectDate(item.date)"> -->
				<view class="title">
					<text>{{ item.date }}</text>
					<!-- <uni-icons type="bottom" size="18" color="#ffffff"></uni-icons> -->
				</view>
				<text v-if="item.tradeType !=5" class="date-tip">
					{{ item.dateInfo }}
				</text>
				<text v-else class="date-tip">
					{{ item.tradeDateBegin.substring(10) }}
				</text>
				<!-- <uni-icons type="bottom" size="18" color="#898989"></uni-icons> -->
			</view>
			<!-- <view class="info">
				<text class="collection">收入：{{ item.income || 0 }}元</text>
				<text class="refund">支出：{{ item.expenses || 0 }}元</text>
			</view> -->
			<view class="content">
				<view @click="goDetail(item)" class="child-item">
					<view class="trade-info">
						<view class="label" style="font-weight: bold;"
							:class="{'collection': item.ledgerType === 1,'refund': item.ledgerType === 0}">
							<text>{{ item.tradeDec }}：</text>
							<text v-if="item.ledgerType === 1">+</text>
							<text v-if="item.ledgerType === 0">-</text>
							<text>{{ item.tradeAmount }}元</text>
						</view>
						<view class="amount"
							:class="{'collection': item.tradeType === 6 || item.tradeType === 8,'refund': item.tradeType === 4 || item.tradeType === 7 || item.tradeType === 9 || item.tradeType === 10}">
							<text v-if="item.tradeType === 6 || item.tradeType === 8">+</text>
							<text
								v-if="item.tradeType === 4 || item.tradeType === 7 || item.tradeType === 9 || item.tradeType === 10">-</text>
							<text>待结算：</text>
							<text>{{ item.settlementAmount }}元</text>
						</view>
						<uni-icons v-if="item.tradeType === 7 || item.tradeType === 9 || item.tradeType === 10"
							type="right" color="#ffffff" size="16"></uni-icons>
						<uni-icons v-else type="right" color="#898989" size="16"></uni-icons>
					</view>
					<view class="funds-info">
						<view class="label">
							总余额：{{ item.balance }}元
						</view>
						<view class="amount"
							:class="{'collection': item.tradeType === 4 || item.tradeType === 7 || item.tradeType === 9,'refund': item.tradeType === 3 || item.tradeType === 5 }">
							<text v-if="item.tradeType === 4 || item.tradeType === 7 || item.tradeType=== 9">+</text>
							<text v-if="item.tradeType === 3 || item.tradeType === 5">-</text>
							<text>可提现：</text>
							<text>{{ item.withdrawableAmount }}元</text>
						</view>
						<uni-icons type="right" color="#ffffff" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				single: ''
			}
		},
		computed: {
			supplierInfo() {
				return this.$store.state.userInfo.supplierInfo;
			}
		},
		mounted() {

		},
		methods: {
			selectDate(date) {
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 1];
				beforePage.$vm.selectDate(date);
			},
			goDetail(item) {
				if (item.tradeType === 6) { // 代采服务费
					uni.navigateTo({
						url: '/subPage_fund/fundDetails/pay?id=' + item.id + '&date=' + item.tradeDate +
							'&amount=' + item.tradeAmount + '&dateInfo=' + item.dateInfo
					})
				} else if (item.tradeType === 5) { //提现
					uni.navigateTo({
						url: '/subPage_fund/fundDetails/withdrawal?id=' + item.id
					})
				} else if (item.tradeType === 8) { // 运费
					uni.navigateTo({
						url: '/subPage_fund/fundDetails/freight?id=' + item.id + '&date=' + item.tradeDate +
							'&amount=' + item.tradeAmount + '&dateInfo=' + item.dateInfo
					})
				}
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.tradingDayStatement {
		position: relative;

		.item {
			margin-bottom: 10upx;
			background-color: #ffffff;

			.title-wrapper {
				display: flex;
				align-items: center;
				padding: 0 20upx;
				// position: sticky;
				// top: 0;
				height: 80rpx;
				background-color: #ffffff;

				.title {
					padding-left: 10upx;
					border-left: 10upx solid #F26022;
				}

				.date-tip {
					margin-left: 30rpx;
					color: #666666;
					font-size: 26rpx;
				}
			}

			.info {
				text-align: right;
				font-size: 28upx;
				padding: 0 20rpx;
				height: 60rpx;
				top: 80rpx;
				position: sticky;
				background-color: #ffffff;
				border-bottom: 2rpx solid #efefef;

				.collection {
					color: red;
				}

				.refund {
					color: #0E932E;
					margin-left: 50upx;
				}
			}

			.content {
				.child-item {
					border-top: 3upx solid #F2F4FA;
					font-size: 32upx;
					padding: 20rpx 30upx;

					.trade-info {
						display: flex;
						align-items: center;
						height: 50rpx;
					}

					.funds-info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 50upx;
					}

					.label {
						flex: 1;
					}

					.collection {
						color: #FC0303;
					}

					.refund {
						color: #0E932E;
					}
				}
			}
		}
	}
</style>